
<template>
  <div class="weightManagement">
    <div class="head-box">
      <van-sticky :offset-top="10">
        <div class="header_body">
          <header-nav class="topes" leftArrow titelText="场内车辆"></header-nav>
        </div>
        <div class="searchs">
          <van-search @search="onSearch" @clear="onclear" v-model="searchStr" shape="round" background="#F8FAFD" placeholder="车牌号/订单类型" />
        </div>
      </van-sticky>
    </div>
    <div class="body-box">
      <van-empty v-if="formData.length<1" description="暂无此数据..." />
      <div class="boty" v-for="(item, i) in formData">
        <router-link :to="{path:'record',query:item }">
          <div class="toplist">
            <van-row style="margin-bottom:10px">
              <van-col span="9">{{item.poundNumber}}</van-col>
              <van-col span="7">
                <div class="centerlist">{{item.carNumber}}</div>
              </van-col>
              <van-col span="4" style="margin-top: 1px;">
                <div v-if="item.orderType==1" class="titleright"> <p style="-webkit-transform: scale(0.9);">采购订单</p></div>
                <div v-if="item.orderType==2" class="titleright"> <p style="-webkit-transform: scale(0.9);">销售订单</p></div>
                <div v-if="item.orderType==3" class="titleright"><p style="-webkit-transform: scale(0.9);">内转运单</p></div>
              </van-col>
              <van-col span="4" style="margin-top: 1px;">
                <div v-if="item.poundType==1" class="titleright1">
                  <p style="-webkit-transform: scale(0.9);">正常过磅</p>
                </div>
                <div v-if="item.poundType==3" class="titleright1">
                  <p style="-webkit-transform: scale(0.9);">混装过磅</p>
                </div>
              </van-col>
            </van-row>
            <van-row style="-webkit-transform: scale(0.8); margin-left:-40px">
              <van-col span="8">
                <div class="bordtr">
                  <div class="lefttitle" style="padding-left:4px">
                    <div class="imgdata"></div>
                    <div>物料名称</div>
                  </div>
                  <div class="lefttitle" style="padding-left:4px">
                    <div class="imgdata1"></div>
                    <div>{{item.createUserName}}</div>
                  </div>
                </div>
              </van-col>
              <van-col span="16">
                <div class="bordtra">
                  <div style="width:50vw;margin-left:10px;margin-bottom:10px;font-size: 14px;">{{item.matterName}}</div>
                  <div style="margin-left:10px">{{item.createTime}}</div>
                </div>
              </van-col>
            </van-row>
            <van-row style="-webkit-transform: scale(0.8); margin-left:-40px;margin-top:10px">
              <van-col span="5">
                <div class="lefttitles">
                  <div class="imgdata2"></div>
                  <div style="margin-top:2%">{{item.goodsTotal}}</div>
                </div>
              </van-col>
              <van-col span="6">
                <div class="lefttitles">
                  <div class="imgdata3"></div>
                  <div style="margin-top:2%;padding-right: 10px;">{{item.goodsTare}}</div>
                </div>
              </van-col>
              <van-col span="6">
                <div class="lefttitles">
                  <div class="imgdata4"></div>
                  <div style="margin-top:2%; padding-right: 10px;">{{item.goodsSuttle}}</div>
                </div>
              </van-col>
              <van-col span="5">
                <div class="lefttitle">
                  <div class="imgdata5"></div>
                  <div style="margin-top:3%">{{item.coverVaried}}</div>
                </div>
              </van-col>
              <van-col span="4">
              </van-col>
            </van-row>
            <div class="imgdall">
              <img v-if="item.status==0" src="../../assets/images/zz.png" alt="">
              <img v-if="item.status==1" src="../../assets/images/z1.png" alt="">
              <img v-if="item.status==2" src="../../assets/images/z2.png" alt="">
              <img v-if="item.status==3" src="../../assets/images/z3.png" alt="">
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import headerNav from "@/components/common/headerNav.vue";
import api from "@/api/index.js";
import { ref, onMounted, reactive, toRefs } from "vue";
export default {
  name: "weightManagement",
  components: {
    headerNav,
  },
  setup() {
    const searchStr = ref("");
    const route = useRoute();
    const router = useRouter();
    const data = reactive({
      formData: {},
      searchData: {},
    });

    const methods = reactive({
      // 搜索时
      onSearch() {
        // console.log("条件搜索");
        methods.paginationpassPoundRecord();
      },

      onclear() {
        console.log("清除条件");
        methods.paginationpassPoundRecord();
      },
      async paginationpassPoundRecord() {
        // console.log(searchStr);
        let page = {
          pageSize: 999,
          current: 1,
        };
        let params = {
          carNumber: searchStr.value,
          matterName: "",
          orderNumber: "",
          orderType: "",
          poundNumber: "",
          poundType: "",
          recordBelong: "",
          status: 0,
        };
        let orderTypeList = [
          { key: "采购订单", value: "1" },
          { key: "销售订单", value: "2" },
          { key: "内部转运单", value: "3" },
        ];
        if (searchStr.value) {
          orderTypeList.forEach((item) => {
            let orderFlag = item.key.indexOf(searchStr.value) != -1;
            if (orderFlag) {
              params.carNumber = "";
              params.orderType = item.value;
            }
          });
        } else {
          params.carNumber = "";
          params.orderType = "";
        }
        let res = await api.paginationpassPoundRecord(page, params);
        data.formData = res.data;
      },
    });

    onMounted(() => {
      // console.log(route);
      // console.log(router);
      methods.onSearch();
    });

    return {
      searchStr,
      route,
      router,
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>

<style lang="less" scoped>
.weightManagement {
  box-sizing: border-box;
  height: 100%;
  padding: 15px;
  background: #f8fafd;
  .head-box {
    height: 100px;
    // background-color: skyblue;
  }
  .body-box {
    overflow-y: auto;
    // padding: 5vw 0;
    height: calc(100% - 100px);
    .boty {
      border-bottom: 15px solid #f8fafd;
      padding: 0 5px;
      .toplist {
        // border: 1px solid rgb(204, 199, 199);
        position: relative;
        font-size: 13px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #3d3d3d;
        background: white;
        .bordtr {
          height: 50px;
          // border-right: 1px solid rgba(0, 0, 0, 0.22);
        }
        .bordtra {
          min-height: 50px;
          height: auto;
          border-left: 1px solid rgba(0, 0, 0, 0.22);
        }
        .centerlist {
          font-size: 13px;
          margin-top: 1px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #000000;
        }

        .titleright {
          width: 48px;
          height: 16px;
          background: rgba(15, 206, 140, 0.16);
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid rgba(52, 179, 255, 1);
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: rgba(52, 179, 255, 1);
          font-size: 12px;
          position: relative;
          p {
            position: absolute;
            top: -75%;
          }
        }
        .titleright1 {
          width: 48px;
          height: 16px;
          background: rgba(15, 206, 140, 0.16);
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #0fce8c;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #0fce8c;
          font-size: 12px;
          position: relative;
          p {
            position: absolute;
            top: -75%;
          }
        }
        .lefttitle {
          display: flex;
          margin-bottom: 9px;
        }
        .imgdata {
          margin-top: 2px;
          margin-right: 5px;
          width: 16px;
          height: 18px;
          background: url("../../assets/images/r73.png") no-repeat;
          background-size: 100% 100%;
        }
        .imgdata1 {
          margin-top: 2px;
          margin-right: 5px;
          width: 16px;
          height: 18px;
          background: url("../../assets/images/rr.png") no-repeat;
          background-size: 100% 100%;
        }
        .imgdata5 {
          margin-right: 10px;
          margin-left: 10px;
          width: 20px;
          height: 22px;
          background: url("../../assets/images/r63.png") no-repeat;
          background-size: 100% 100%;
        }
        .imgdall {
          position: absolute;
          top: 28%;
          right: 2%;
          img {
            width: 70px;
            height: 70px;
          }
        }
      }
      .lefttitles {
        display: flex;
        border-right: 1px solid rgba(0, 0, 0, 1);

        .imgdata2 {
          margin-right: 5px;
          width: 20px;
          height: 22px;
          background: url("../../assets/images/r60.png") no-repeat;
          background-size: 100% 100%;
        }
        .imgdata3 {
          margin-left: 10px;
          margin-right: 5px;
          width: 20px;
          height: 22px;
          background: url("../../assets/images/r61.png") no-repeat;
          background-size: 100% 100%;
        }
        .imgdata4 {
          margin-right: 5px;
          margin-left: 10px;
          width: 20px;
          height: 22px;
          background: url("../../assets/images/r62.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
.van-field__control {
  width: 45vw;
  min-width: 40vw;
  height: 35px;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none !important;
  resize: none;
}
.topes {
  background: #f8fafd !important;
}
</style>
